<template>
  <div style="height: 48px">
    <!-- logo -->
    <a href="/" class="logo" :class="{ collapse: collapseLeft }">
      <slot name="logo">
				<el-image :src="require('@/assets/img/logo1.png')" style="height: 48px; width: 48px" fit="contain"></el-image>
				<span v-show="!collapseLeft" class="title">Teamwork</span>
			</slot>
    </a>
    <nav class="navbar">
      <!-- sidebar-toggle__left -->
			<a href="#" class="sidebar-toggle__left" v-if="leftSideToggle" @click="toggleLeft">
				<i v-if="collapseLeft" class="el-icon-s-unfold"></i>
				<i v-else class="el-icon-s-fold"></i>
			</a>
      <!-- nav -->
			<div class="navbar-custom-menu">
				<ul class="nav navbar-nav">
					<li>
						<el-badge value="12">
							<span class="el-icon-bell"></span>
						</el-badge>
					</li>
					<li v-if="rightSideToggle" @click="toggleRight">
						<a href="#">
							<i class="el-icon-s-tools"></i>
						</a>
					</li>
				</ul>
			</div>
      <!-- user-info -->
      <!-- shortcut -->
      <!-- sidebar-toggle__right -->
    </nav>
  </div>
</template>

<script>
export default {
  name: "PageHeader",
  props: {
    leftSideToggle: {
      type: Boolean,
      default: true,
    },
		rightSideToggle: {
			type: Boolean,
			default: true
		},
		isLeftCollapse: {
			type: Boolean,
			default: false
		},
		isRightCollapse: {
			type: Boolean,
			default: true
		}
  },
	data() {
		return {
			collapseLeft: this.isLeftCollapse,
			collapseRight: this.isRightCollapse
		}
	},
	methods: {
		toggleLeft() {
			this.collapseLeft = !this.collapseLeft
			this.$emit("update:isLeftCollapse", this.collapseLeft)
		},
		toggleRight() {
			this.collapseRight = !this.collapseRight;
			this.$emit("update:isRightCollapse", this.collapseRight)
		}
	}
};
</script>

<style lang="scss" scoped>
.logo {
  display: flex;
  height: 48px;
  line-height: 48px;
  width: 230px;
  text-align: center;
  background-color: #367fa9;
  color: #fff;
  font-size: 1.5em;
  font-weight: 600;
	float: left;
	transition: width .5s;
	justify-content: center;
}

.logo.collapse {
	width: 65px!important;
}

a.logo {
  text-decoration: none;
}

.navbar {
	background-color: #3c8dbc;
	height: 48px;

	a {

	}

	.sidebar-toggle__left {
		float: left;
		padding: 12px 16px;
		color: #ffffff;
		font-size: 1.5em;
		display: block;

		span i {
			padding: 12px 16px;
		}

		&:hover {
			background-color: #367fa9;
		}
	}

	.navbar-custom-menu {
		float: right;
		color: #fff;
		height: 48px;
		padding-right: 12px;

		ul.navbar-nav {
			//height: 100%;

			li {
				float: left;
				cursor: pointer;
				padding: 12px 20px;
				font-size: 1.2em;

				a {
					color: #fff;
					//font-size: 14px;
				}

				&:hover {
					background-color: #367fa9;
				}

			}

			&::after {
				clear: both;
			}

		}

		&::after {
			clear: both;
		}
	}

	&::after {
		content: "";
		clear: both;
	}
}
</style>
